import React from 'react';
import { toJS } from 'mobx'
import { Tools, Icon,Button, Avatar,List } from 'weaver-mobile';
import {  Reply,  CKRichText, RouteLayout  } from 'weaver-mobile-page';
import {  Route } from 'react-router-dom';
const getLabel = Tools.getLabel
const ButtonGroup = RouteLayout.ButtonGroup;
export const WrRemark = ({remark,remarkStore,remarkLayoutStore,onTextChange,iconClick,onOk,onCancel,editable})=>{
    const prefixClass = 'workrelate-mobile-remark-';
    let show = editable?"block":'none'
    return (
      <div className={`${prefixClass}container`}  onClick={editable?iconClick:null }>
        <div className={`${prefixClass}textarea`} >
          <div dangerouslySetInnerHTML={{ __html: remark }}></div>
        </div>
        <div className={`${prefixClass}iconarea`}>
          <Icon size={'md'} type='editor' onClick={() => iconClick()} style={{display:show}}></Icon>
        </div>

        <div>
          <Route
            key={remarkLayoutStore.id}
            path={remarkLayoutStore.path}
            render={() => (
              <RouteLayout>
                <div
                  key="remark-layout"
                  className="wm-route-layout"
                >
                  <div className={`${prefixClass}richtext`}>
                    <CKRichText store={remarkStore}
                     text={remark}
                     onChange={(e)=>{onTextChange(e)}}
                      replyProps={{
                        leftConfig: [{ type: 'voice' },
                        { type: 'blog-tupian', model: 2  }]
                      }}
                    />
                    {/* <div className={`${prefixClass}buttonarea`}>
                      <Button className={`${prefixClass}button`}   onClick={() => onCancel()}>{getLabel(31129,'取消')}</Button>
                      <Button className={`${prefixClass}button`} type="primary"  onClick={() => onOk()}>{getLabel(826,'确定')}</Button>
                  </div> */}

                  </div>
                  <ButtonGroup data={[
                    {
                      key: 'clear',
                      text: getLabel(201, '取消'),
                      onClick: () => onCancel(),
                    },
                    {
                      key: 'clear',
                      text: getLabel(826,'确定'),
                      onClick: () => onOk(),
                      type: 'primary',
                    }
                  ]} isButton={true} />
                </div>
              </RouteLayout>
            )}
          />
        </div>

      </div>
    );
}
export default WrRemark;